<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    @import url(http://fonts.googleapis.com/css?family=Oswald:700);
    body {
      font-family: "Oswald";
      text-transform: uppercase;
      background: #000;
    }
    svg {
      max-height: 90vh;
      margin: 5vh auto;
      display: block;
    }
  </style>
  <body>
    <svg viewBox="0 0 125 115">
      <defs>
        <linearGradient
          id="rainbow"
          x1="0"
          x2="0"
          y1="0"
          y2="100%"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#FF5B99" offset="0%" />
          <stop stop-color="#FF5447" offset="20%" />
          <stop stop-color="#FF7B21" offset="40%" />
          <stop stop-color="#EAFC37" offset="60%" />
          <stop stop-color="#4FCB6B" offset="80%" />
          <stop stop-color="#51F7FE" offset="100%" />
        </linearGradient>
      </defs>
      <text fill="url(#rainbow)">
        <tspan font-size="30" x="0" y="30">gradient</tspan>
        <tspan font-size="65" x="0" dy="60">text</tspan>
        <tspan font-size="20" x="0" dy="20">all up in here</tspan>
      </text>
    </svg>
  </body>
</html>
